<template>
  <div class="success-box">
    <!-- <div class="lanmu_box">
      <div class="box">
        <van-tabs v-model="active" @change="tabChange">
          <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
        </van-tabs>
      </div>
    </div> -->
    <van-notice-bar
  left-icon="volume-o"
  text="抽奖次数每日凌晨12：00清空，不要忘记抽奖哦～"
/>
    <div class="lanmu_box">
      <div @click="tabChange(item)" :class="['btn',{'on':prizeIlk==item.query}]" v-for="(item,index) in lanmu" :key="index">{{ item.name }}</div>
    </div>
   

    <div class="lan_cj">
     
        <p class="djs" v-if="countdown > 0">
              <!-- 1天03:23:45后过期 -->
              <van-count-down class="control-count-down" use-slot :time="countdown" @change="onChange" @finish="onFinish">
                <text class="mh">今日抽奖次数将在：</text>
                <text class="item">{{ timeData.hours }}<text class="mh">小时</text></text>
                <text class="item">{{ timeData.minutes }}<text class="mh">分钟</text></text>
                <text class="item">{{ timeData.seconds }}<text class="mh">秒</text></text>
                <text class="mh">后清空</text>
              </van-count-down>
             
            </p>
      
    </div>
    <!-- v-if="prizeImages.length"  -->
        <Turntable :listName="listName" ref="lottery" :backgroundImageUrl="backgroundImageUrl" @getlotteryPosition = "getlotteryPosition" :lotteryCount="lotteryCount" :prizeImages="prizeImages" :lotteryButtonImage="lotteryButtonImage"></Turntable>
    <!-- <div class="success-tp">
       <img src="https://img.js.design/assets/img/6392e59f264f81a7c4646e39.jpg#89a0a0ea1b6954c2f0288c111b85f9e6" alt="" srcset="">
    </div>
    <div class="success-name">
     
    </div> -->
  </div>
</template>
 
<script>
import {
  getPrizeList,
  getDrawOnce,
 getLotteryRecordList
} from "@/api/index";
import Turntable from '@/components/turntable';
export default {
  components: {
    Turntable
  },
  data() {
    return {
      lanmu:[
       {name:'台球抽奖',query:0},
       {name:'麻将抽奖',query:1},
     ],
     lotteryCount:0,//抽奖次数
      backgroundImageUrl:'https://higo-oss.oss-cn-hangzhou.aliyuncs.com/static/images/su_bg.png',
      prizeImages:[], //奖品列表图片
      lotteryButtonImage:"https://higo-oss.oss-cn-hangzhou.aliyuncs.com/static/images/su_btn.png",//抽奖按钮图片
      listName:[],
      prizeIlk:0,
      countdown:0,
      timeData: {},
    };
  },
  onShow() {
    console.log(this.$mp.query.roomIlk)
    this.prizeIlk = this.$mp.query.roomIlk||0
    this.prizeImages=[]
    this.getGiftList()
    this.clickMemberFn()
  },

   methods: {
    onChange(e) {
      // //console.log(e)
      this.timeData = e.target
      this.timeData.hours = this.timeData.hours<10?'0'+this.timeData.hours:this.timeData.hours
      this.timeData.minutes = this.timeData.minutes<10?'0'+this.timeData.minutes:this.timeData.minutes
      this.timeData.seconds = this.timeData.seconds<10?'0'+this.timeData.seconds:this.timeData.seconds
    },
    // 订单状态切换
   tabChange(e){
     //console.log(e)
      // const index = e.index
     this.prizeIlk =e.query
     this.getGiftList()
   },

    toTel(str) {
      const start = str && str.slice(0, 4)
      const end = str && str.slice(-4)
      return `${start}****${end}`
    },
     toName(str) {
      const start = str && str.slice(0, 1)
      // const end = str && str.slice(-4)
      return `${start}**`
    },
    clickMemberFn(){
      getLotteryRecordList().then(res=>{
      if(res.statusCode=='00000'){
        res.data.map(item=>{
          item.userId=this.toTel(item.userId)
          // item.member_name=this.toName(item.member_name)
        })
        this.listName=res.data
      }
     })
    },
      getlotteryPosition(){
      let that = this;
      //模拟网络请求时间
      getDrawOnce({
        prizeIlk:this.$mp.query.roomIlk||0
      }).then(res=>{
          if(res.statusCode=='00000'){
          // 中奖位置
          const _index=this.prizeImages.findIndex(item=>item.id==res.data)
            // let lotteryPosition = _index;
            // //console.log(_index)
            that.$refs.lottery.stop(_index);
            // that.targegift=this.prizeImages[_index]
            this.getGiftList()
          }
        })
        
    
    },
      getGiftList() {
        this.$showLoading('加载中...')
        getPrizeList({
          prizeIlk:this.prizeIlk
        }).then((res) => {
        if (res.statusCode == '00000') {
         this.prizeImages=res.data.prizes
         this.lotteryCount=res.data.lotteryChances
         this.countdown=res.data.countdown
         wx.hideLoading()
        }else {
          wx.hideLoading()
          this.$toast(res.message)
        }
      });
    },
  },
  onHide() {},

  onUnload() {},
  created() {},
};
</script>

<style lang="scss" scoped>
.lanmu_box{
  //  height: 88rpx;
  //  margin-bottom:24rpx;
   display: flex;
   width: 300px;
   margin: 0 auto;
   justify-content: space-around;
   align-items: center;
   .btn{
    width: 200rpx;
    height: 64rpx;
  
    margin-top: 12px;
    text-align: center;
    line-height: 64rpx;
    border-radius: 255px;
    // background:#dfdfdf;
    border: 4px solid rgba(255, 242, 203, 1);
    color: rgba(153, 153, 153, 1);
    background: linear-gradient(158.05deg, rgba(209, 209, 209, 1) 0%, rgba(255, 255, 255, 1) 28.18%, rgba(215, 215, 215, 1) 100%);
   }
   .on{
    background: linear-gradient(180deg, rgba(255, 196, 42, 1) 0%, rgba(254, 251, 218, 1) 100%);
border: 4px solid rgba(255, 242, 203, 1);
    color: rgba(224, 70, 36, 1);
   }
   .box{
     position: fixed;
     top:0;
     width: 100%;
     z-index: 100;
     background: #fff;
   }
   /deep/ .van-tab{
     color:#666666;
     font-size:30rpx;
   }
   /deep/ .van-tabs__line{
     background: #00C200;
   }
   /deep/ .van-tab--active{
     color:#00C200;
     font-weight: bold;
   }
 }
.success-box {
  width: 750rpx;
  min-height: 100vh;
  background-color: rgba(253, 76, 49, 1);
  position: relative;
  .lan_cj{
    width: 299px;
    margin: 12px auto;
    display: flex;
    position: absolute;
    top: 110px;
    left: 52px;
    z-index: 2;
    .djs {
          font-size: 20rpx;
          color: #ce4646;
          margin-left: 20rpx;
          .item {
            margin-right: 5rpx;
            .mh {
              font-size: 16rpx;
              margin-left: 2rpx;
            }
          }
        }
  }
  .success-tp{
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 1147rpx;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  
}
</style>
